<template>
  <div>
    <div id="pie" style="height: 300px"></div>
    <div id="map" style="height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json"
type EChartsOption = echarts.EChartsOption;

onMounted(() => {
  var chartDom = document.getElementById("pie")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  statApi().then((res) => {
    const pieData = res.data.salePie;
    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.yesterday_money,
    }));

    option = {
      // 提示组件，鼠标移入图标提示的信息
      tooltip: {
        trigger: "item",
        backgroundColor:'rgba(0,0,0,.5)',
        textStyle:{
          color:'#fff'
        },
        formatter:'{b}:{c}({d}%)'
      },
      legend: {
        orient: "vertical",
        left: "right",
      },
      series: [
        {
          type: "pie",
          label:{
            color:'inherit'
          },
          radius: ["40%", "70%"],
          data,
          
        },
      ],
    };

    option && myChart.setOption(option);
  });
  
  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  // 地图比较特殊，需要先注册json数据
  echarts.registerMap('china', china as any);

  mapChart.setOption(
    {
      title: {
        text: 'Population Density of Hong Kong （2011）',
        subtext: 'Data from Wikipedia',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          data: [],
         
        }
      ]
    })
  
});
</script>

<style scoped></style>
